﻿<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">

  <title>Home</title>
  <link rel="shortcut icon" href="img/favicon.ico" />
  <!-- Bootstrap -->
  <link rel="stylesheet" href="css/bootstrap.min.css" media="screen" />
  <!-- Hover.css -->
  <link rel="stylesheet" href="css/hover-min.css" />
  <!-- Font Awesome -->
  <link rel="stylesheet" href="css/font-awesome.min.css" media="screen" />
  <!-- Owl Carousel -->
  <link rel="stylesheet" href="css/owl.theme.min.css">
  <link rel="stylesheet" href="css/owl.carousel.min.css">
  <!-- Addon Style -->
  <link rel="stylesheet" href="css/style.css" media="screen" />
  <!--[if IE]>
  		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
</head>

<body>

  <!-- Preloader -->
  <div id="preloader">
    <div id="loader">
      <img src="img/cube.gif" alt="preload spinner">
      <div class="pre-logo">
        <h4>Cross.</h4>
      </div>
    </div>
  </div>
  <!-- End of preloader -->

  <!-- Start wrapper as cross-portfolio -->
  <div id="cross-portfolio" class="cross-portfolio">

    <!-- Hamburger menu on scroll-->
    <nav id="nav-icon">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
    </nav>
    <!-- end of hamburger -->

    <!-- Overlay menu -->
    <nav id="menu-overlay">
      <ul id="menu" class="menu-click list-unstyled">
        <li><a data-scroll href="#profile" class="smooth-scroll">TOP</a></li>
        <li><a data-scroll href="#services" class="smooth-scroll">SERVICES</a></li>
        <li><a data-scroll href="#portfolio" class="smooth-scroll">WORK</a></li>
        <li><a data-scroll href="#resume" class="smooth-scroll">RESUME</a></li>
        <li><a data-scroll href="#contact" class="smooth-scroll">CONTACT</a></li>
      </ul>
    </nav>
    <!-- end of overlay menu -->

    <!-- Start intro / background / big title -->
    <div id="intro">

      <!-- Background -->
      <div class="bg">
        <div class="bg-img">
          <img src="img/bg1280x788.jpg" alt="Background Image" />
        </div>
      </div>
      <!-- End of background -->

      <!-- Top logo -->
      <div class="cross-top">
        <a href="index.html" class="logo"><span>Cross.</span></a>
      </div>
      <!-- End of top logo -->

      <!-- The middle big title -->
      <div class="big-title">
        <div class="text-center">
          <h1>David Smith</h1>
          <p>I'm <span class="sub-title"></span></p>
        </div>
      </div>
      <!-- End of big title -->

      <!-- Chevron arrow down button -->
      <button class="trigger hvr-hang"><i class="fa fa-chevron-down"></i></button>

    </div>
    <!-- End of intro -->

    <!-- Start of profile -->
    <div id="profile" class="content">
      <div class="containers">
        <div class="row">
          <div class="col-lg-12">

            <!-- Title -->
            <div class="title">
              <h1>David Smith</h1>
              <span class="h4 element"></span>
            </div>
            <!-- End of title -->

            <!-- About me -->
            <div class="space">
              <h3>ABOUT ME</h3>
              <p class="text-justify">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis. Nam sem lacus, vulputate ut turpis vel, viverra porta ante. Pellentesque a ornare libero. Aenean sed ipsum a lectus volutpat dictum non non
                neque. Nunc sit amet felis non velit consequat venenatis id eu dui.</p>
              <p class="text-justify">In congue eu dui sit amet euismod. Ut vehicula tellus nec laoreet congue. Mauris id eros ultricies, vulputate metus ac, euismod lorem.</p>
            </div>
            <!-- End of about me -->
          </div>

          <!-- Avatar image -->
          <div class="col-lg-6 col-md-12 col-sm-12 hidden-md animated">
            <img src="img/avatar500x680.jpg" class="avatar" alt="Avatar">
          </div>
          <!-- End avatar image -->

          <!-- Start skills / expertise -->
          <div class="col-lg-6 col-md-12 col-sm-12">
            <div class="space">
              <h3>EXPERTISE</h3>

              <h5>HTML / CSS3</h5>
              <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-danger" style="width: 90%"></div>
              </div>

              <h5>Javascript</h5>
              <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-success" style="width: 85%"></div>
              </div>

              <h5>PHP</h5>
              <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-warning" style="width: 80%"></div>
              </div>

              <h5>Angular JS</h5>
              <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-default" style="width: 70%"></div>
              </div>

              <h5>MySQL / NoSQL</h5>
              <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-success" style="width: 75%"></div>
              </div>

              <h5>.NET</h5>
              <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-danger" style="width: 90%"></div>
              </div>

            </div>
          </div>
          <!-- End of skills / expertise -->
        </div>
        <!-- end row -->
      </div>
      <!-- end containers -->
    </div>
    <!-- end profile -->

    <!-- Start countTo -->
    <div id="count" class="content">
      <div class="containers">
        <div class="row">
          <div class="col-md-12">

            <!-- CountTo -->
            <div class="animated text-center">
              <div class="col-md-4">
                <p class="h2"><i class="fa fa-child"></i> <span class="count" data-from="0" data-to="27" data-speed="5000" data-refresh-interval="50"></span></p>
                <h5 class="text-weight">Customers</h5>
              </div>
              <div class="col-md-4">
                <p class="h2"><i class="fa fa-laptop"></i> <span class="count" data-from="0" data-to="56" data-speed="5000" data-refresh-interval="50"></span></p>
                <h5 class="text-weight">Web Completed</h5>
              </div>
              <div class="col-md-4">
                <p class="h2"><i class="fa fa-code"></i> <span class="count" data-from="0" data-to="135923" data-speed="5000" data-refresh-interval="50"></span></p>
                <h5 class="text-weight">Line of Code</h5>
              </div>
            </div>
            <!-- End countTo -->

          </div>
          <!-- end col-md-12 -->
        </div>
        <!-- end row -->
      </div>
      <!-- end containers -->
    </div>
    <!-- End of countTo -->

    <!-- Start services / what I can -->
    <div id="services" class="content">
      <div class="containers">
        <div class="row">

          <!-- Title -->
          <div class="col-md-12 headline">
            <h2>WHAT I CAN</h2>
            <hr>
          </div>
          <!-- end title -->

          <!-- Start -->
          <div class="col-md-12">
            <div class="row">

              <div class="col-sm-6 animated">
                <div class="panel panel-default hvr-grow-shadow">
                  <div class="panel-body">
                    <div class="icon-item">
                      <i class="fa fa-code"></i>
                      <h5>CLEAN CODE</h5>
                    </div>
                    <div class="text-justify">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis.</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-sm-6 animated">
                <div class="panel panel-default hvr-grow-shadow">
                  <div class="panel-body">
                    <div class="icon-item">
                      <i class="fa fa-desktop"></i>
                      <h5>RESPONSIVE UI</h5>
                    </div>
                    <div class="text-justify">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis.</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- .row -->

            <div class="row">
              <div class="col-sm-6 animated">
                <div class="panel panel-default hvr-grow-shadow">
                  <div class="panel-body">
                    <div class="icon-item">
                      <i class="fa fa-cloud"></i>
                      <h5>CLOUD DEVELOPMENT</h5>
                    </div>
                    <div class="text-justify">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis.</p>
                    </div>
                  </div>
                </div>
              </div>

              <div class="col-sm-6 animated">
                <div class="panel panel-default hvr-grow-shadow">
                  <div class="panel-body">
                    <div class="icon-item">
                      <i class="fa fa-rocket"></i>
                      <h5>FAST PERFORMANCE</h5>
                    </div>
                    <div class="text-justify">
                      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis.</p>
                    </div>
                  </div>
                </div>
              </div>
              <!-- end services item -->
            </div>
            <!-- row -->
          </div>
          <!-- col-md-12 -->
        </div>
        <!-- row -->
      </div>
      <!-- containers -->
    </div>
    <!-- End of services / what i can -->

    <!-- Start of portfolio -->
    <div id="portfolio" class="content">
      <div class="containers">
        <div class="row">

          <!-- title -->
          <div class="col-md-12 headline">
            <h2>RECENT WORK</h2>
            <hr>
          </div>
          <!-- end title -->

          <!-- start work profolio image -->
          <div class="col-md-12 space">

            <!-- image 1 -->
            <figure class="cross-image animated">
              <img src="img/project_1.jpg" alt="Project 1" />
              <figcaption>
                <h2>Project 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis.</p>
                <a href="#">View More</a>
              </figcaption>
            </figure>

            <!-- image 2 -->
            <figure class="cross-image animated">
              <img src="img/project_2.jpg" alt="Project 2" />
              <figcaption>
                <h2>Project 2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis.</p>
                <a href="#">View More</a>
              </figcaption>
            </figure>

            <!-- image 3 -->
            <figure class="cross-image animated">
              <img src="img/project_3.jpg" alt="Project 3" />
              <figcaption>
                <h2>Project 3</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis.</p>
                <a href="#">View More</a>
              </figcaption>
            </figure>

            <!-- image 4 -->
            <figure class="cross-image animated">
              <img src="img/project_4.jpg" alt="Project 4" />
              <figcaption>
                <h2>Project 4</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis.</p>
                <a href="#">View More</a>
              </figcaption>
            </figure>

          </div>
          <!-- end of work portfolio image -->

          <!-- middle view more button -->
          <div class="col-md-12 text-center animated">
            <a href="#" class="btn btn-success btn-lg" data-toggle="modal" data-target="#projectModal"><i class="fa fa-plane"></i> View More</a>
          </div>
          <!-- end button -->
        </div>
        <!-- row -->
      </div>
      <!-- containers -->
    </div>
    <!-- End of portfolio -->
    <div class="tlinks">Collect from <a href="http://www.cssmoban.com/" >网页模板</a></div>

    <!-- Start of resume -->
    <div id="resume" class="content">
      <div class="containers">
        <div class="row">

          <!-- title -->
          <div class="col-md-12 headline">
            <h2>RESUME</h2>
            <hr>
          </div>
          <!-- end title-->
        </div>
        <!-- .row -->

        <!-- start resume item -->
        <div class="row">

          <div class="col-md-12 animated">
            <h3>Education</h3>
          </div>

          <!-- education 1 -->
          <div class="col-sm-8 col-md-8 col-md-push-4 animated">
            <h4>Computer science</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis. Nam sem lacus, vulputate ut turpis vel, viverra porta ante.</p>
            <hr class="hidden-xs">
          </div>

          <div class="col-sm-4 col-md-4 col-md-pull-8 animated">
            <div class="icon-list">
              <div class="icon-list-icon">
                <i class="fa fa-graduation-cap"></i>
              </div>
              <div class="icon-list-content">
                <div class="icon-list-title">Princeton University</div>
                <div class="icon-list-info">
                  <span>2008 - 2010</span>
                </div>
              </div>
            </div>
            <hr class="visible-xs">
          </div>

          <!-- education 2 -->
          <div class="col-sm-8 col-md-8 col-md-push-4 animated">
            <h4>Software engineering</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis. Nam sem lacus, vulputate ut turpis vel, viverra porta ante.</p>
            <hr class="hidden-xs">
          </div>

          <div class="col-sm-4 col-md-4 col-md-pull-8 animated">
            <div class="icon-list">
              <div class="icon-list-icon">
                <i class="fa fa-graduation-cap"></i>
              </div>
              <div class="icon-list-content">
                <div class="icon-list-title">Harvard University</div>
                <div class="icon-list-info">
                  <span>2010 - 2013</span>
                </div>
              </div>
            </div>
            <hr class="visible-xs">
          </div>

        </div>
        <!-- .row -->

        <div class="row">
          <div class="col-md-12 animated">
            <h3>Experience</h3>
          </div>

          <!-- experience 1 -->
          <div class="col-sm-8 col-md-8 col-md-push-4 animated">
            <h4>Hybrid developer</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis. Nam sem lacus, vulputate ut turpis vel, viverra porta ante.</p>
            <hr class="hidden-xs">
          </div>

          <div class="col-sm-4 col-md-4 col-md-pull-8 animated">
            <div class="icon-list">
              <div class="icon-list-icon">
                <i class="fa fa-briefcase"></i>
              </div>
              <div class="icon-list-content">
                <div class="icon-list-title">Swift</div>
                <div class="icon-list-info">
                  <span>2013 - 2014</span>
                </div>
              </div>
            </div>
            <hr class="visible-xs">
          </div>

          <!-- experience 2 -->
          <div class="col-sm-8 col-md-8 col-md-push-4 animated">
            <h4>Software engineer</h4>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis. Nam sem lacus, vulputate ut turpis vel, viverra porta ante.</p>
            <hr class="hidden-xs">
          </div>

          <div class="col-sm-4 col-md-4 col-md-pull-8 animated">
            <div class="icon-list">
              <div class="icon-list-icon">
                <i class="fa fa-briefcase"></i>
              </div>
              <div class="icon-list-content">
                <div class="icon-list-title">Manulife</div>
                <div class="icon-list-info">
                  <span>2014 - 2015</span>
                </div>
              </div>
            </div>
            <hr class="visible-xs">
          </div>

        </div>
        <!-- .row -->

        <!-- download cv button -->
        <div class="row">
          <div class="col-md-12 animated text-center">
            <a href="#" class="btn btn-default btn-lg"><i class="fa fa-cloud-download"></i> Download CV</a>
          </div>
        </div>
        <!-- row -->
      </div>
      <!-- containers -->
    </div>
    <!-- End of portfolio -->

    <!-- Start testimonial -->
    <div id="testimonial" class="content">
      <div class="row">
        <div class="col-md-12">

          <!-- Carousel Slides / Quotes -->
          <div class="carousel-inner animated">

            <!-- Quote 1 -->
            <div class="item">
              <blockquote>
                <div class="row">
                  <div class="col-sm-3 text-center">
                    <img class="img-circle" src="img/mike.png" alt="Mike Avatar">
                  </div>
                  <div class="col-sm-9">
                    <p class="text-item">Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit!</p>
                    <small>Mike Tyson</small>
                  </div>
                </div>
              </blockquote>
            </div>

            <!-- Quote 2 -->
            <div class="item">
              <blockquote>
                <div class="row">
                  <div class="col-sm-3 text-center">
                    <img class="img-circle" src="img/adam.jpg" alt="Adam Avatar">
                  </div>
                  <div class="col-sm-9">
                    <p class="text-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor nec lacus ut tempor. Mauris.</p>
                    <small>Adam Sandler</small>
                  </div>
                </div>
              </blockquote>
            </div>

            <!-- Quote 3 -->
            <div class="item">
              <blockquote>
                <div class="row">
                  <div class="col-sm-3 text-center">
                    <img class="img-circle" src="img/ben.png" alt="Ben Avatar">
                  </div>
                  <div class="col-sm-9">
                    <p class="text-item">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut rutrum elit in arcu blandit, eget pretium nisl accumsan.</p>
                    <small>Ben Beatles</small>
                  </div>
                </div>
              </blockquote>
            </div>

          </div>
          <!-- End Carousel Slides -->
        </div>
        <!-- col-md-12 -->
      </div>
      <!-- row -->
    </div>
    <!-- End of testimonial -->

    <!-- Start of contact -->
    <div id="contact" class="content">
      <div class="containers">
        <div class="row space">

          <!-- title -->
          <div class="col-md-12 headline">
            <h2>LET'S WORK TOGETHER</h2>
            <hr>
            <p>I'm available for freelance opportunities.</p>
          </div>
          <!-- End title -->

          <!-- Start google maps / change your address in data-center-->
          <div class="col-md-12 animated">
            <div class="gmap" id="map" data-center="121 S Pinckney St" data-zoom="15">
              <address>
                121 S Pinckney St
              </address>
            </div>
          </div>
          <!-- End google maps -->
        </div>
        <!-- row -->

        <!-- Email me button -->
        <div class="row">
          <div class="col-md-12 animated text-center">
            <a href="mailto:youremail@gmail.com" class="btn btn-primary btn-lg"><i class="fa fa-envelope"></i> EMAIL ME</a>
          </div>
        </div>
        <!-- row -->
      </div>
      <!-- containers -->
    </div>
    <!-- End of contact -->

    <!-- Start footer -->
    <div id="footer" class="content">
      <div class="containers">
        <div class="row">

          <div class="col-md-12 text-center">
            <a href="index.html" class="footer-logo"><span>Cross.</span></a>
            <ul class="social">
              <li class="hvr-grow"><a href="#"><i class="fa fa-facebook"></i></a></li>
              <li class="hvr-grow"><a href="#"><i class="fa fa-twitter"></i></a></li>
              <li class="hvr-grow"><a href="#"><i class="fa fa-github"></i></a></li>
              <li class="hvr-grow"><a href="#"><i class="fa fa-linkedin"></i></a></li>
              <li class="hvr-grow"><a href="#"><i class="fa fa-dribbble"></i></a></li>
            </ul>
            <p>Copyright &copy; 2017.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
          </div>

        </div>
        <!-- row -->
      </div>
      <!-- containers -->
    </div>
    <!-- End of footer -->

  </div>
  <!-- end cross portfolio -->

  <!-- Fullscreen Modal -->
  <div class="modal fade fullscreen" id="projectModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <!-- modal button close -->
					<a href="#" class="close" data-dismiss="modal"><i class="fa fa-times"></i></a>
				</div>

        <div class="modal-body">
          <div class="row">

            <div class="col-md-8 col-md-offset-2">

              <!-- image 1 -->
              <figure class="cross-image">
                <img src="img/project_1.jpg" alt="Project 5" />
                <figcaption>
                  <h2>Project 5</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis.</p>
                  <a href="#">View More</a>
                </figcaption>
              </figure>

              <!-- image 2 -->
              <figure class="cross-image">
                <img src="img/project_2.jpg" alt="Project 6" />
                <figcaption>
                  <h2>Project 6</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis.</p>
                  <a href="#">View More</a>
                </figcaption>
              </figure>

              <!-- image 3 -->
              <figure class="cross-image">
                <img src="img/project_3.jpg" alt="Project 7" />
                <figcaption>
                  <h2>Project 7</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis.</p>
                  <a href="#">View More</a>
                </figcaption>
              </figure>

              <!-- image 4 -->
              <figure class="cross-image">
                <img src="img/project_4.jpg" alt="Project 8" />
                <figcaption>
                  <h2>Project 8</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis.</p>
                  <a href="#">View More</a>
                </figcaption>
              </figure>

              <!-- image 5 -->
              <figure class="cross-image">
                <img src="img/project_1.jpg" alt="Project 9" />
                <figcaption>
                  <h2>Project 9</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis.</p>
                  <a href="#">View More</a>
                </figcaption>
              </figure>

              <!-- image 6 -->
              <figure class="cross-image">
                <img src="img/project_2.jpg" alt="Project 10" />
                <figcaption>
                  <h2>Project 10</h2>
                  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit libero ac accumsan lobortis.</p>
                  <a href="#">View More</a>
                </figcaption>
              </figure>

            </div>
            <!-- col-md-8 -->
          </div>
          <!-- row -->
        </div>
        <!-- modal body -->
      </div>
      <!-- modal-content -->
    </div>
    <!-- modal-dialog -->
  </div>
  <!-- fullscreen -->

  <!--Script -->

  <!-- Jquery v1.12.0 -->
  <script src="js/jquery.min.js"></script>
  <!--Bootstrap Js-->
  <script src="js/bootstrap.min.js"></script>
  <!--Classie js -->
  <script src="js/classie.min.js"></script>
  <!--Typed js -->
  <script src="js/typed.min.js"></script>
  <!-- OwlCarousel -->
  <script src="js/owl.carousel.min.js"></script>
  <!-- Google maps -->
  <!---<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false&amp;language=en"></script>--->
  <!-- Mobile map for google -->
  <script src="js/jquery.mobilegmap.min.js"></script>
  <!-- Waypoints -->
  <script src="js/jquery.waypoints.min.js"></script>
  <!-- ScrollReveal -->
  <script src="js/scrollreveal.min.js"></script>
  <!-- CountTo -->
  <script src="js/jquery.countTo.min.js"></script>
  <!-- SmoothScroll -->
  <script src="js/smooth-scroll.min.js"></script>
  <!-- Custom js -->
  <script src="js/main.js"></script>

  <!-- end script -->
</body>

</html>

